<template>
  <div class="bj">
    <div class="flexC">
      <div class="flex">
        <ul class="Inv_ul flex AlignItemsC colorF font_s24  Bold">
          <li @click="categoryFun(1)" :class="{ category: category === 1 }" class="flexC JustifyContentFE flex2 textC">
           <p class="font_s30">护理员配比大于12</p>
          </li>
          <li @click="categoryFun(2)" :class="{ category: category === 2 }" class="flex2 textC">
            <p>单家机构服务老人数</p>
            <p>月增减超20%</p>
          </li>
          <li @click="categoryFun(3)" :class="{ category: category === 3 }" class="flex2 textC">
            <p>服务员单日签到次数</p>
            <p>大于12次</p>
          </li>
          <li @click="categoryFun(4)" :class="{ category: category === 4 }" class="flex2 textC">
            <p>2、3级老人周服务大于3次或</p>
            <p>4级老人周服务大于5次</p>
          </li>
        </ul>
        <div><img src="../../assets/img/home/clone.png" alt="" style="margin:2rem 2rem 0rem 0rem;" /></div>
      </div>
      <div class="flexC" style="padding:0rem 4.0625rem 2.25rem 4.0625rem;">
        <ul class="Inv_ula flex AlignItemsC JustifyContentC colorF font_s20  Bold">
          <li class="flex2 textC">序号</li>
          <li class="flex4 textC">护理服务机构名称</li>
          <li class="flex2 textC">服务人数</li>
          <li class="flex2 textC">护理员人数</li>
          <li class="flex2 textC">护理员配比</li>
          <li class="flex2 textC">进展</li>
        </ul>
        <div style="height: 50vh;" class="superviseList font_s18">
          <ul v-for="(item, index) in arr" class="Inv_ulb flex colorF Bold textC" :key="'list' + index" v-if="category === 1">
            <li class="flex2 textC">{{ item.xh }}</li>
            <li class="flex4 textC">{{ item.hlfwjgmc }}</li>
            <li class="flex2 textC">{{ item.fwrs }}</li>
            <li class="flex2 textC">{{ item.hlyrs }}</li>
            <li class="flex2 textC">{{ item.hlypb }}</li>
            <li class="flex2 textC">{{ item.jj }}</li>
          </ul>
          <ul v-for="(item, index) in arr" class="Inv_ulb flex colorF Bold textC" :key="'list' + index" v-if="category === 2"></ul>
          <ul v-for="(item, index) in arr" class="Inv_ulb flex colorF Bold textC" :key="'list' + index" v-if="category === 3">
            <!-- <li class="flex3 textC">{{ item.a }}</li>
            <li class="flex2 textC">{{ item.b }}</li>
            <li class="flex2 textC">{{ item.c }}</li>
            <li class="flex2 textC">{{ item.c }}</li>
            <li class="flex2 textC">{{ item.c }}</li>
            <li class="flex2 textC">{{ item.c }}</li>
            <li class="flex1 textC">{{ item.c }}</li> -->
          </ul>
          <ul v-for="(item, index) in arr" class="Inv_ulb flex colorF Bold textC" :key="'list' + index" v-if="category === 4"></ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FuWuList',

  data () {
    return {
      category: 1,
      arr: [
        { xh: 1, hlfwjgmc: '济家云海护理站', fwrs: 2542, hlyrs: 164, hlypb: 15.50, jj: '内部处置' },
        { xh: 2, hlfwjgmc: '康浦护理站', fwrs: 1844, hlyrs: 123, hlypb: 14.99, jj: '内部处置' },
        { xh: 3, hlfwjgmc: '海亿达护理站', fwrs: 1691, hlyrs: 115, hlypb: 16.70, jj: '内部处置' },
        { xh: 4, hlfwjgmc: '金杨居家养老服务中心', fwrs: 1187, hlyrs: 82, hlypb: 14.48, jj: '内部处置' },
        { xh: 5, hlfwjgmc: '绿康护理站', fwrs: 169, hlyrs: 12, hlypb: 14.08, jj: '内部处置' },
        { xh: 6, hlfwjgmc: '健东护理站', fwrs: 1953, hlyrs: 147, hlypb: 13.29, jj: '内部处置' },
        { xh: 7, hlfwjgmc: '德心居护理站', fwrs: 967, hlyrs: 73, hlypb: 13.25, jj: '内部处置' },
        { xh: 8, hlfwjgmc: '颐家馨护理站', fwrs: 655, hlyrs: 50, hlypb: 13.10, jj: '内部处置' },
        { xh: 9, hlfwjgmc: '东明居家养老服务中心', fwrs: 244, hlyrs: 19, hlypb: 12.84, jj: '内部处置' }
        // { xh: 10, hlfwjgmc: '颐家宁护理站', fwrs: 710, hlyrs: 56, hlypb:12.68, jj: '内部处置' },
        // { xh: 11, hlfwjgmc: '永颐护理站', fwrs: 541, hlyrs: 44, hlypb:12.30, jj: '内部处置' },
        // { xh: 12, hlfwjgmc: '高行居家养老服务中心', fwrs: 134, hlyrs: 11, hlypb:12.18, jj: '内部处置' },
        // { a: '上海艾禹护护理站', b: 'Y01914011 ', c: '0 ' },
        // { a: '上海艾禹护护理站', b: 'Y01914011 ', c: '0 ' },
        // { a: '上海艾禹护护理站', b: 'Y01914011 ', c: '0 ' },
        // { a: '上海艾禹护护理站', b: 'Y01914011 ', c: '0 ' },
        // { a: '上海艾禹护护理站', b: 'Y01914011 ', c: '0 ' },
        // { a: '上海艾禹护护理站', b: 'Y01914011 ', c: '0 ' },
        // { a: '上海艾禹护护理站', b: 'Y01914011 ', c: '0 ' },
        // { a: '上海艾禹护护理站', b: 'Y01914011 ', c: '0 ' },
        // { a: '上海艾禹护护理站', b: 'Y01914011 ', c: '0 ' }
      ]
    }
  },
  methods: {
    categoryFun (index) {
      this.category = index
    }
  }
}
</script>

<style lang="scss" scoped>
.bj {
  width: 100%;
  height: 100%;
  .Inv_ul {
    width: 89.375rem;
    height: 4.375rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: bold;
    // margin: 4rem;
    margin: 5.825rem 0 1.255rem 0;
  }
  .Inv_ula {
    width: 89.375rem;
    height: 4.375rem;

    font-weight: bold;
    border: 1px solid rgba(0, 255, 255, 1);
  }

  .Inv_ulb {
    font-weight: bold;
    width: 89.375rem;
    height: 3.75rem;
    overflow: hidden;
    li {
      padding: 1rem;
    }
  }

  .Inv_ulb:nth-child(even) {
    background: rgba(0, 255, 255, 0.1);
  }
  .category {
    color:#30DFFF ;
    background: url(../../assets/img/home/16.png) no-repeat;
    background-size: 100% 100%;
  }
}
</style>
